<template>
  <!-- 弹框开始 -->
  <uni-popup ref="popup" type="bottom" :showPopup="true">
    <view class="like">
      <view class="like-tittle">
        <view class="like-tittle-box">
          <image class="like-tittle-img" :src="host + Detail.icon" mode="aspectFill"></image>
          <view class="like-tittle-box-b">
            <view class="product-price">￥<text class="plan-price-text">{{ priceAll }} </text>元&nbsp;/
              &nbsp;&nbsp;{{ amountAll }}个</view>
            <view class="cart-item-right" v-if="specificationsAll && specificationsAll[descIndex]">
              <view class="stepper">
                <button class="btn minus" :disabled="specificationsAll[descIndex].userAmount <= 0"
                  @click="delFun()">-</button>
                <input class="input" type="number" v-model.number="specificationsAll[descIndex].userAmount" disabled />
                <button class="btn plus"
                  :disabled="specificationsAll[descIndex].userAmount >= specificationsAll[descIndex].amount"
                  @click="addFun()">+</button>
              </view>
              <view class="cart-item-right-text">
                <text class="cart-item-right-text-text">(库存{{ specificationsAll[descIndex].amount }}件)</text>有货
              </view>
            </view>
          </view>
        </view>

        <i class="iconfont icon-searchclose" @click="close" />
      </view>
      <view class="like-desc1" v-if="showSpecificationConditionsFlag">
        <view class="like-desc-t">
          <view class="like-desc-t-title">
            <!-- 日期 -->
          </view>
          <scroll-view scroll-x="true" class="scroll-container">
            <view class="product-list">
              <view v-for="(item, index) in specificationConditions" :key="index"
                :class="['product-item', index == descIndex ? 'product-item-active' : '']" @click="checkFun(index)">
                <text class="spec-text-sum" v-if="specificationsAll[index].userAmount">x{{
                  specificationsAll[index].userAmount }}</text>
                <text class="product-name">{{ item }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <scroll-view class="like-desc" scroll-y="true">
        <!-- 规格 -->
        <view v-if="specificationsAll && specificationsAll[descIndex]">
          <view class="like-desc-t" v-for="row, index in specificationsAll[descIndex].data">
            <view class="like-desc-t-title">
              {{ row.name }}
            </view>
            <view class="like-desc-t-box" v-if="row.items">
              <view
                :class="['like-desc-t-box-list', row.nameIndex == item.itemName ? 'like-desc-t-box-list-active' : '']"
                v-for="(item, idx) in row.items" @click="checkMoreFun(index, item.itemName)">
                {{ item.itemName }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 底部操作栏 -->
      <view class="footer" v-if="type == 'cart'">
        <button class="add-cart-btn btn-class" @click="toCart('addToCart')">确认加购</button>
      </view>
      <view class="footer1" v-show="type == 'buy'">
        <view class="footer1-box">
          <view class="footer1-box-l">
            <view class="footer1-box-l-t">
              已选<text class="footer1-box-l-t-text">{{ amountAll }}</text>个
            </view>
            <!-- <view class="footer1-box-l-b" v-if="contactArr.length==0" @click="goContact">
							联系人：暂无联系人
							<image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
						</view>
						<view class="footer1-box-l-b" v-else>
							联系人：
							<uniPicker color="#3d3d3d" ref="uniPicker" class="pickerBox" @p="pBtn" /> &nbsp;
						</view> -->
          </view>
          <view class="footer1-box-r">
            <view class="">
              商品金额：
            </view>
            <view class="product-price">￥<text class="plan-price-text">{{ priceAll }} </text>元</view>

          </view>
        </view>
        <button class="add-cart-btn btn-class" @click="toCart('submitToCart')">立即下单</button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import {
  mapGetters
} from 'vuex'
import uniPicker from '@/components/uni_picker/uni_picker.vue'
export default {
  components: {
    uniPicker
  },
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      descIndex: 0,
      specificationsIndex: 0,
      quantity: 1,
      price: 2,
      Detail: {},
      contactArr: [],
      specificationsAll: [], //规格集合
      specifications: [],
      specificationConditions: [],
      specificationsArr: [], //选中的 规格
      inventories: [],
      priceAll: 0,
      amountAll: 0,
      showSpecificationConditionsFlag: true, //是否展示scroll-view的条件 
      type: '', //cart 加购，buy 购买
      paramObj: {
        name: ''
      },
      img: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg'
    }
  },
  computed: {
    ...mapGetters([
      'addrObj'
    ]),
  },
  mounted() {
    this.userDetail()
  },
  methods: {
    //初始化方法
    async userDetail() {
      var that = this;
      var data = {}
      const {
        contactsList
      } = await this.$apiFun.getApi(this.$api.userDetailApi, data)

      let contactArr = contactsList.map((item) => {
        return {
          id: item.realname,
          name: item.realname
        }
      })
      if (contactArr.length > 0) {
        this.contactArr = contactArr
        this.paramObj.name = contactArr[0].name
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs['uniPicker'].changeShow({
              array: contactArr,
              id: contactArr[0].name,
            })
          }, 1000)
        })
      }

    },
    // 设置观影人

    pBtn(e) {
      this.paramObj.name = e.name
    },
    open(data, type) {
      this.priceAll = 0
      this.type = type //cart 加购，buy 购买
      this.Detail = data
      this.specificationsArr = [] //选中的 规格
      this.setData()
      this.$refs.popup.open()
      if (type == 'buy') {
        // 回调历史记录接口
        this.userDetail()
      }
    },
    // 初始化数据
    setData() {
      let {
        specifications,
        specificationConditions,
        inventories,
      } = this.Detail.specificationInventories
      if (!specificationConditions || specificationConditions && specificationConditions.length == 0) {
        specificationConditions = ['']
        this.showSpecificationConditionsFlag = false
      }
      this.specificationConditions = specificationConditions
      console.log('this.specificationConditions', this.specificationConditions)
      this.inventories = inventories
      // 初始化 各个规格
      this.initRule(specifications, specificationConditions)
    },
    initRule(specifications, specificationConditions) {
      // 初始化 各个规格
      this.specifications = specifications.map((item) => {
        let itemName = ''
        item.items.map((row, index) => {
          if (index == 0) {
            itemName = row.itemName
          }
        })
        return {
          ...item,
          nameIndex: itemName
        }
      })
      specificationConditions.map((item, index) => {
        this.specificationsAll.push({
          name: item,
          data: JSON.parse(JSON.stringify(this.specifications)),
          amount: 0, //库存
          totalPrice: 0, //总价格
          userAmount: 0, //用户选择的数量
          currentUnitPrice: 0,
          originalUnitPrice: 0
        })
      })
      this.specificationsAll.forEach((row) => {
        // 3月20号:接机服务#商务专车;酒店服务#三星级酒店;门票服务#中排门票
        let name = ''
        // 按照中文排序
        let arr = JSON.parse(JSON.stringify(row.data))
        arr.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'));
        arr.map((group) => {
          name += group.name + '#' + group.nameIndex + ';'
        })
        name = row.name + ':' + name
        name = name.slice(0, name.length - 1)
        this.inventories.map((item) => {
          if (item.key == name) {
            row.amount = item.amount
            row.userAmount = 0 //用户选择的数量
            row.currentUnitPrice = item.currentUnitPrice / 100
            row.originalUnitPrice = item.originalUnitPrice / 100
          }
        })
      })
      // 回显已加购
      // if (this.Detail.selectedSpecificationGroups) {
      // 	this.specificationsAll.forEach((row) => {
      // 		this.Detail.selectedSpecificationGroups.map((item) => {
      // 			if (item.specificationCondition == row.name) {
      // 				row.userAmount = item.amount //用户选择的数量
      // 				row.totalPrice = item.totalPrice //计算后的总价格
      // 			}
      // 			row.data.forEach((group) => {
      // 				item.specificationItemGroup.map((i) => {
      // 					if (group.name == i.name) {
      // 						group.nameIndex = i.itemName
      // 					}
      // 				})
      // 			})
      // 			// 获取库存
      // 			// 3月20号:接机服务#商务专车;酒店服务#三星级酒店;门票服务#中排门票
      // 			let name = ''
      // 			// 按照中文排序
      // 			let arr = JSON.parse(JSON.stringify(row.data))
      // 			arr.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'));
      // 			arr.map((group) => {
      // 				name += group.name + '#' + group.nameIndex + ';'
      // 			})
      // 			name = row.name + ':' + name
      // 			name = name.slice(0, name.length - 1)
      // 			this.inventories.map((j) => {
      // 				if (j.key == name) {
      // 					row.amount = j.amount
      // 					row.currentUnitPrice = j.currentUnitPrice / 100
      // 					row.originalUnitPrice = j.originalUnitPrice / 100
      // 				}
      // 			})
      // 		})
      // 	})
      // 	this.priceArr()
      // }
    },
    goContact() {
      uni.navigateTo({
        url: '/page_wallet/peopleList'
      })
    },
    async goodsFun() {
      let data = await this.$apiFun.getApi(
        this.$api.goodsInventoryApi, {
        goodsId: this.Detail.id,
        specificationItems: [],
        specificationCondition: ''
      }
      )
    },
    // 规格项选择
    checkMoreFun(index, itemName) {
      if (itemName == this.specificationsAll[this.descIndex].data[index].nameIndex) {
        // 重复点击不进行计算
        return
      }
      this.$set(this.specificationsAll[this.descIndex].data[index], 'nameIndex', itemName)
      this.$set(this.specificationsAll[this.descIndex], 'userAmount', 0)
      let row = this.specificationsAll[this.descIndex]
      // 3月20号:接机服务#商务专车;酒店服务#三星级酒店;门票服务#中排门票
      let name = ''
      // 按照中文排序
      let arr = JSON.parse(JSON.stringify(row.data))
      arr.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'));
      arr.map((group) => {
        name += group.name + '#' + group.nameIndex + ';'
      })
      name = row.name + ':' + name
      name = name.slice(0, name.length - 1)

      this.inventories.map((item) => {
        if (item.key == name) {
          row.amount = item.amount
          row.userAmount = 0 //用户选择的数量
          row.currentUnitPrice = item.currentUnitPrice / 100
          row.originalUnitPrice = item.originalUnitPrice / 100
        }
      })
      this.priceArr()
      this.$forceUpdate()
    },
    // 时间项选择
    checkFun(val) {
      //重置规格下标
      this.specificationsIndex = 0;
      this.descIndex = val

      this.$forceUpdate()
    },
    close() {
      this.Detail = {}
      this.contactArr = []
      this.specificationsAll = [] //规格集合
      this.specifications = []
      this.specificationConditions = []
      this.specificationsArr = [] //选中的 规格
      this.inventories = []
      this.$refs.popup.close()
    },
    // 添加商品
    addFun() {
      this.specificationsAll[this.descIndex].userAmount++
      this.priceArr()
      this.$forceUpdate()
    },
    // 减少商品
    delFun() {
      this.specificationsAll[this.descIndex].userAmount--
      this.priceArr()
      this.$forceUpdate()
    },
    // 计算商品加购的总数、总价
    priceArr() {
      // // 这里一定要用Decimal来初始化
      // this.totalPrice = new Decimal(0)
      // // 循环遍历数组
      // this.medicine.map(item => {
      //   // 数量
      //   const num = new Decimal(item.num);
      //   // 单价
      //   const price = new Decimal(item.price);
      //   // 数量*单价
      //   const product = num.times(price);
      //   // 只有用Decimal初始化后，才会有plus这个方法
      //   // 求总价
      //   this.totalPrice = this.totalPrice.plus(product);
      // })
      // // 把totalPrice转为数字类型
      // this.totalPrice = this.totalPrice.toNumber();

      // 当 specifications 或其任何子属性变化时执行
      // Decimal: 加 add, 减 sub, 乘 mul, 除 div, 求余 modulo

      const Decimal = this.$Decimal
      let price = new Decimal(0)
      let amount = 0
      this.specificationsAll.filter((item) => item.userAmount > 0).map((row) => {
        amount += row.userAmount
        console.log('row.currentUnitPrice', row.currentUnitPrice)
        const num1 = new Decimal(row.currentUnitPrice);

        const num2 = new Decimal(row.userAmount); //实时加购数量
        let num3 = (num1.mul(num2).toNumber())
        num3 = new Decimal(num3)
        price = num3.add(price).toNumber()
      })
      console.log('this.specificationsAll', this.specificationsAll)
      this.amountAll = amount
      this.priceAll = price
    },
    leadToSetPeople() {
      const that = this
      uni.showModal({
        title: '当前还未设置观影人',
        content: '前往设置？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            that.close()
            uni.navigateTo({
              url: '/page_wallet/peopleList'
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },

    // 商品加购
    async addToCart(array) {
      let param = {
        "goodsId": this.Detail.id,
        "specificationSelectionMode": this.Detail.specificationSelectionMode,
        "selectedSpecificationGroups": array
      }
      uni.showLoading()
      let data = await this.$apiFun.postApi(
        this.$api.cartAddToApi, param
      )
      uni.hideLoading()
      uni.showToast({
        title: '已加购',
        icon: 'none',
      })
      this.close()
      this.$emit('closeBtn')
    },
    // 跳转到确认订单页面进行支付
    async submitToCart(array) {
      let param = {
        "goodsId": this.Detail.id,
        "specificationSelectionMode": this.Detail.specificationSelectionMode,
        "selectedSpecificationGroups": array
      }
      uni.showLoading()
      await this.$apiFun.delApi(
        this.$api.emptyGoodsApi
      )
      let data = await this.$apiFun.postApi(
        this.$api.cartAddToApi, param
      )
      this.getData()
    },
    async getData() {
      let data = await this.$apiFun.getApi(
        this.$api.goodsGroupListApi,
      )
      data.forEach((item) => {
        item.goods.forEach((row) => {
          row.check = true
          row.selectedSpecificationGroups.forEach((list) => {
            list.check = true
            list.currentUnitPrice = list.currentUnitPrice / 100
          })
        })
      })
      uni.hideLoading()
      setTimeout(() => {
        this.submit1(data)
      }, 100)
    },
    // 跳转确认订单页面
    submit1(data) {
      this.$refs.popup.close()
      uni.navigateTo({
        url: '/page_wallet/payConfirm?data=' + encodeURIComponent(JSON.stringify(data))
      })
      return true
    },
    // async submitToCart(array) {
    // 	let param = {
    // 		"realname": this.paramObj.name,
    // 		"goodsList": [{
    // 			"goodsId": this.Detail.id,
    // 			"selectedSpecificationGroups": array
    // 		}]
    // 	}
    // 	uni.showLoading()
    // 	let data = await this.$apiFun.postApi(
    // 		this.$api.orderCreateApi, param
    // 	)

    // 	let res = await this.$apiFun.getApi(
    // 		this.$api.orderPrepayApi, {
    // 			tradeNo: data
    // 		}
    // 	)
    // 	// 支付api
    // 	// 支付api

    // 	try {

    // 		await this.$publicFun.payFun(res)

    // 		uni.navigateTo({

    // 			url: '/page_wallet/orderList'

    // 		})

    // 	} catch (e) {

    // 		uni.navigateTo({

    // 			url: '/page_wallet/orderList'

    // 		})

    // 	}
    // 	console.log('res-----------', res)
    // 	uni.hideLoading()
    // 	this.close()
    // 	this.$emit('submitBtn')
    // },
    toCart(type) {
      if (type == 'submitToCart' && this.contactArr.length == 0) {
        this.leadToSetPeople()
        return
      }
      let array = []
      let arr = this.specificationsAll.filter((row) => {
        return row.userAmount > 0
      }).map((i) => {
        let specificationItemGroup = i.data.map((item) => {
          return {
            itemName: item.nameIndex,
            name: item.name
          }
        })
        array.push({
          specificationCondition: i.name,
          specificationItemGroup: specificationItemGroup,
          amount: i.userAmount
        })
      })

      console.log('array--------', array)
      if (array.length == 0) {
        uni.showToast({
          title: '请先选择商品~',
          icon: 'none'
        })
        return
      }
      // let param = {
      // 	"realname": this.paramObj.name,
      // 	"goodsList": [{
      // 		"goodsId": this.Detail.id,
      // 		"selectedSpecificationGroups": array
      // 	}]
      // }
      type == 'addToCart' ? this.addToCart(array) : this.submitToCart(array)
    }
  },
  onReachBottom() {

  },

}
</script>

<style scoped lang="less">
// 置顶弹框
.like {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 0 0;
  height: 85vh;

  .scroll-container {
    white-space: nowrap;
    /* 防止换行 */
    width: 100%;
    padding: 10rpx 0 0rpx;

    .product-list {
      display: inline-flex;
      /* 横向排列 */
    }

    .product-item {
      min-width: 180rpx;
      height: 60rpx;
      padding: 0 10rpx;
      text-align: center;
      line-height: 60rpx;
      margin-right: 7rpx;
      border-radius: 6rpx;
      display: block;
      font-size: 28rpx;
      color: #5c5c5c;
      border: 2rpx solid #f6f6f6;
      background: #f6f6f6;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .spec-text-sum {
        position: absolute;
        top: -5rpx;
        right: -5rpx;
        padding: 1rpx 8rpx;
        border-radius: 15rpx;
        color: #ffffff;
        background: #f94d1b;
      }
    }

    .product-item-active {
      color: #fd4a21;
      border-radius: 6rpx;
      box-sizing: border-box;
      border: 2rpx solid #fd4a21;
      background-color: #faece8;


    }
  }

  .like-tittle {
    border-radius: 20rpx 20rpx 0 0;
    padding: 0 40rpx;
    box-sizing: border-box;
    width: 100%;
    height: 200rpx;
    font-size: 34rpx;
    color: #131313;
    justify-content: space-between;
    display: flex;
    align-items: flex-start;
    background: #fcfcfc;

    .iconfont {
      font-size: 40rpx;
    }

    .like-tittle-box {
      height: 200rpx;
      display: flex;
      align-items: center;

      .like-tittle-img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
      }

      .like-tittle-box-b {
        padding-left: 20rpx;

        .product-price {
          font-size: 20rpx;
          color: #e64340;
          font-weight: bold;
          padding-left: 10rpx;

          .plan-price-text {
            font-size: 40rpx;
            margin: 0 5rpx;

          }

        }

        .cart-item-right {
          display: flex;
          align-items: center;
          margin-top: 50rpx;

          .cart-item-right-text {
            font-size: 24rpx;
            margin-left: 10rpx;

            .cart-item-right-text-text {
              color: #9b999a;
            }
          }

          .stepper {
            display: flex;
            align-items: center;

            .btn {
              width: 50rpx;
              height: 50rpx;
              line-height: 46rpx;
              padding: 0;
              // border: 2rpx solid #ddd;
              border-radius: 8rpx;
              font-size: 32rpx;
              background: white;

              &.disabled {
                opacity: 0.6;
              }
            }

            .input {
              width: 80rpx;
              height: 50rpx;
              margin: 0 12rpx;
              text-align: center;
              font-size: 28rpx;
              border: 2rpx solid #ddd;
              border-radius: 8rpx;
            }
          }

          .total {
            font-size: 28rpx;
            color: #ff4444;
          }
        }
      }

    }

  }

  .like-desc1 {
    padding: 0 40rpx;
    box-sizing: border-box;
    font-size: 25rpx;
    color: #5c5c5c;
    margin: 30rpx auto 20rpx;
    text-align: left;

  }

  .like-desc {
    padding: 0 40rpx;
    box-sizing: border-box;
    font-size: 25rpx;
    color: #5c5c5c;
    margin: 0 auto 200rpx;
    text-align: left;
    height: calc(85vh - 530rpx);

    .like-desc-t {
      margin-bottom: 30rpx;

      .like-desc-t-title {
        font-size: 28rpx;
        font-weight: bold;
      }

      .like-desc-t-box {
        margin-top: 25rpx;
        justify-content: space-between;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .like-desc-t-box-list {
          width: 300rpx;
          height: 60rpx;
          justify-content: center;
          display: flex;
          align-items: center;
          background-color: #f6f6f6;
          margin-bottom: 22rpx;
          font-size: 24rpx;
          border-radius: 6rpx;
          position: relative;

          .spec-text-sum {
            position: absolute;
            top: -10rpx;
            left: -10rpx;
            padding: 2rpx 8rpx;
            border-radius: 15rpx;
            color: #ffffff;
            background: #f94d1b;
          }
        }

        .like-desc-t-box-list-active {

          color: #fd4a21;
          border-radius: 6rpx;
          box-sizing: border-box;
          border: 2rpx solid #fd4a21;
          background-color: #faece8;

        }
      }
    }

    .like-desc-b {
      margin-top: 35rpx;

      .like-desc-t-title {
        font-size: 28rpx;
        font-weight: bold;
      }

      .cart-wrapper {
        margin: 30rpx 0 120rpx;

        .cart-item {
          background: white;
          padding: 24rpx;
          margin-bottom: 20rpx;
          border-radius: 16rpx;
          display: flex;
          justify-content: space-between;

          .cart-item-left {
            .spec-text {
              display: block;
              font-size: 26rpx;
              color: #333;
              margin-bottom: 12rpx;

              .spec-text-sum {
                margin-right: 5rpx;
                padding: 2rpx 8rpx;
                border-radius: 15rpx;
                color: #ffffff;
                background: #f94d1b;
              }
            }

            .cart-item-left-info {
              display: flex;
              align-items: center;
              color: #9b999a;
              font-size: 20rpx;

              .price {
                padding-right: 10rpx;
                margin-right: 10rpx;
                border-right: 1rpx solid #9b999a;
                height: 14rpx;
                line-height: 14rpx;
              }

              .sum {}
            }
          }


        }
      }



    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

  .add-cart-btn {
    background: #ff5000;
    color: #fff;
    border-radius: 50rpx;
  }
}

.footer1 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

  /deep/.pickerBox {
    color: #131313 !important;
  }

  .footer1-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22rpx;
    padding: 0 35rpx 20rpx;
    box-sizing: border-box;

    .product-price {
      font-size: 20rpx;
      color: #e64340;
      font-weight: bold;

      .plan-price-text {
        font-size: 40rpx;
        margin: 0 5rpx;

      }
    }

    /deep/.pickerBox {
      font-size: 22rpx;

    }

    .footer1-box-l {
      color: #a1a1a1;

      .footer1-box-l-t {
        margin-bottom: 15rpx;

        .footer1-box-l-t-text {
          color: #e64340;
        }
      }

      .footer1-box-l-b {
        display: flex;
        align-items: baseline;
        white-space: nowrap;

        .arrow-icon {
          width: 10rpx;
          height: 10rpx;
          margin-left: 10rpx;
        }

      }
    }

    .footer1-box-r {
      color: #3d3d3d;
      display: flex;
      align-items: baseline;

    }
  }

  .add-cart-btn {
    background: #ff5000;
    color: #fff;
    border-radius: 50rpx;
  }
}
</style>